<template>
  <div class="">
    <el-dialog
      width="1000px"
      :title="$t('今日任务')"
      :visible.sync="dialogVal"
      :before-close="handelMission"
    >
      <div class="taskVal">
        <span style="color: #a6acb1">{{ $t("今日任务总数") }}</span
        >：<span>{{ totalTaskCount || 0 }}</span> {{ $t("个") }}，{{
          $t("已执行")
        }}<span>{{ executedTaskCount || 0 }}</span
        >{{ $t("个") }}，{{ $t("待执行")
        }}<span>{{ unExecutedTaskCount || 0 }}</span
        >{{ $t("个") }}，{{ $t("告警")
        }}<span style="color: #fb4c5e">{{ abNormalCount || 0 }}</span
        >{{ $t("个") }}，{{ $t("正常") }}<span>{{ normalCount || 0 }}</span
        >{{ $t("个") }}
      </div>
      <el-table :data="taskList2" style="width: 100%" height="290">
        <el-table-column
          prop="execTime"
          :label="$t('计划执行时间')"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="taskName" :label="$t('任务名称')" align="center">
        </el-table-column>
        <el-table-column
          prop="progressStatus"
          :label="$t('任务进度状态')"
          align="center"
        >
          <template slot-scope="scope">
            <div
              :style="`color:${calFontColor[scope.row.progressStatus].color}`"
            >
              {{ scope.row.progressStatusName }}
            </div>
          </template>
        </el-table-column>
        <el-table-column :label="$t('操作')" align="center">
          <template slot-scope="scope">
            <div class="table-btns">
              <div
                v-if="scope.row.progressStatus != '4'"
                class="serch-btn cursor-pointer"
                :style="
                  scope.row.progressStatus != '3'
                    ? 'border-color:rgba(0, 209, 255, 0.2);background-color:rgba(0, 209, 255, 0.1);color:rgba(255, 255, 255, 0.5)'
                    : scope.row.progressStatus == '4'
                    ? 'border-color:rgba(0, 209, 255, 0.2);background-color:rgba(0, 209, 255, 0.1);color:rgba(255, 255, 255, 0.5)'
                    : ''
                "
                @click="suspend(scope.row)"
              >
                {{ $t("暂停") }}
              </div>
              <div
                v-if="scope.row.progressStatus == '4'"
                class="serch-btn cursor-pointer"
                :style="
                  scope.row.progressStatus != '4'
                    ? 'border-color:rgba(0, 209, 255, 0.2);background-color:rgba(0, 209, 255, 0.1);color:rgba(255, 255, 255, 0.5)'
                    : scope.row.progressStatus != '4'
                    ? 'border-color:rgba(0, 209, 255, 0.2);background-color:rgba(0, 209, 255, 0.1);color:rgba(255, 255, 255, 0.5)'
                    : ''
                "
                @click="cancelSuspend(scope.row)"
              >
                {{ $t("取消暂停") }}
              </div>
              <div
                class="btn-red cursor-pointer"
                :style="
                  scope.row.progressStatus != '3' &&
                  scope.row.progressStatus != '4'
                    ? 'border-color:rgba(0,255, 255, 0, 1);background-color:rgba(0,255, 0, 0, 0.5);color:rgba(255, 255, 255, 0.5)'
                    : ''
                "
                @click="taskTermination(scope.row)"
              >
                {{ $t("终止") }}
              </div>
              <div
                class="btn-red cursor-pointer"
                :style="
                  scope.row.progressStatus >= '3'
                    ? 'border-color:rgba(0,255, 255, 0, 1);background-color:rgba(0,255, 0, 0, 0.5);color:rgba(255, 255, 255, 0.5)'
                    : ''
                "
                @click="taskDel(scope.row)"
              >
                {{ $t("删除") }}
              </div>
              <!-- <el-dropdown
                trigger="click"
                @command="(command) => handleDel(command, scope.row)"
              >
                <div
                  class="btn-red cursor-pointer"
                  :style="
                    scope.row.progressStatus >= '3'
                      ? 'border-color:rgba(0,255, 255, 0, 1);background-color:rgba(0,255, 0, 0, 0.5);color:rgba(255, 255, 255, 0.5)'
                      : ''
                  "
                  style="width: 66px"
                >
                  删除
                </div>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="handlePeriodicTask"
                    >当前为：周期任务</el-dropdown-item
                  >
                  <el-dropdown-item command="handleRegularEvenIf"
                    >当前为：定期任务，即使任务</el-dropdown-item
                  >
                </el-dropdown-menu>
              </el-dropdown> -->
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" style="display: flex; justify-content: flex-end">
        <div class="reset-btn" @click="handelMission">
          {{ $t("关闭") }}
        </div>
      </div>
    </el-dialog>
    <!-- 删除单日任务弹框 -->
    <TaskDeleteModal
      :detailInfos="detailInfos"
      :status="status"
      :taskId="taskId"
      :execId="execId"
      :rowTaskId="rowTaskId"
      @getDataList="getDataList"
      @closeTaskModal="closeTaskModal"
      ref="task_delete_modal"
    ></TaskDeleteModal>
  </div>
</template>

<script>
import {
  API_taskControl, //任务控制
} from "@/api/robot/monitor";
import { API_getcalendarpageList, delExecIds } from "@/api/task/calendar";
import TaskDeleteModal from "@/components/TaskDeleteModal";
export default {
  props: {
    dialogVal: {
      type: Boolean,
      default: false,
    },
    totalTaskCount: "",
    executedTaskCount: "",
    unExecutedTaskCount: "",
    abNormalCount: "",
    normalCount: "",
    radio: "",
    status: "",
    taskId: "",
    execId: "",
    taskName: "",
    currentTaskTimer: "",
    rowTaskId: "",
    taskExecId: "",
    detailInfos: {},
  },
  components: { TaskDeleteModal },
  data() {
    return {
      //不同状态不同颜色-日历
      calFontColor: {
        0: { color: "#00D1FF", borderColor: "#00D1FF" }, //等待执行
        1: { color: "#00D1FF", borderColor: "#00D1FF" }, //等待执行
        2: { color: "#FFAD30", borderColor: "#FFAD30" }, //任务超期
        3: { color: "#FF4967", borderColor: "#FF4967" }, //正在执行
        4: { color: "#FF7000", borderColor: "#FF7000" }, //任务暂停
        5: { color: "#73F6AF", borderColor: "#73F6AF", fontbgc: "#73F6AF" }, //执行完成
        6: { color: "#CC77DC", borderColor: "#CC77DC", fontbgc: "#FF4967" }, //中途终止
      },
      taskList2: [],
      execTimes: this.getNowTime(),
      dialogVisible: false,
    };
  },
  created() {
    this.getDataList(); //任务表格数据
  },
  methods: {
    closeTaskModal() {
      this.dialogVal = false;
    },
    /**获取 任务列表 表格数据 */
    getDataList() {
      API_getcalendarpageList({
        execTime: this.execTimes,
        pageSize: 100,
        pageNum: 1,
      }).then((res) => {
        if (res.code == 200) {
          this.taskList2 = res.rows;
        } else {
          this.taskList2 = [];
        }
      });
    },
    // 获取当前的日期
    getNowTime() {
      var now = new Date();
      var year = now.getFullYear(); //得到年份
      var month = now.getMonth(); //得到月份
      var date = now.getDate(); //得到日期
      month = month + 1;
      month = month.toString().padStart(2, "0");
      date = date.toString().padStart(2, "0");
      var defaultDate = `${year}-${month}-${date}`;
      return defaultDate;
    },
    // 任务暂停   按钮
    suspend(row) {
      if (row.progressStatus != "3") {
        return;
      } else {
        this.$confirm(
          `${this.$t("确定暂停任务")}${row.taskName}?`,
          this.$t("提示"),
          {
            confirmButtonText: this.$t("确定"),
            cancelButtonText: this.$t("取消"),
            type: "warning",
          }
        )
          .then(() => {
            API_taskControl({
              cmd: "3X12",
              values: [row.taskId, row.taskExecId],
            }).then((res) => {
              if (res.code == 200 && res.data.nerrcode == 0) {
                this.$message({
                  type: "success",
                  message: this.$t("任务已暂停"),
                });
                this.getDataList();
              } else {
                this.$message.error(this.$t("暂停失败请重试"));
              }
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: this.$t("已取消"),
            });
          });
      }
    },
    // 任务 取消暂停 按钮
    cancelSuspend(row) {
      if (row.progressStatus == "4") {
        this.$confirm(
          `${this.$t("确定恢复任务")}${row.taskName}?`,
          this.$t("提示"),
          {
            confirmButtonText: this.$t("确定"),
            cancelButtonText: this.$t("取消"),
            type: "warning",
          }
        )
          .then(() => {
            API_taskControl({
              cmd: "3X11",
              values: [row.taskId, row.taskExecId],
            }).then((res) => {
              if (res.code == 200 && res.data.nerrcode == 0) {
                this.$message({
                  type: "success",
                  message: this.$t("已恢复暂停任务!"),
                });
                this.getDataList();
              } else {
                this.$message.error(this.$t("恢复暂停任务失败请重试"));
              }
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: this.$t("已取消"),
            });
          });
      }
    },
    // 任务终止   按钮
    taskTermination(row) {
      if (row.progressStatus != "3" && row.progressStatus != "4") {
        return;
      } else {
        this.$confirm(
          `${this.$t("确定终止任务")}${row.taskName}?`,
          this.$t("提示"),
          {
            confirmButtonText: this.$t("确定"),
            cancelButtonText: this.$t("取消"),
            type: "warning",
          }
        )
          .then(() => {
            API_taskControl({
              cmd: "3X13",
              values: [row.taskId, row.taskExecId],
            }).then((res) => {
              if (res.code == 200 && res.data.nerrcode == 0) {
                this.$message({
                  type: "success",
                  message: this.$t("任务已终止"),
                });
                this.getDataList();
              } else {
                this.$message.error(this.$t("终止失败请重试"));
              }
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: this.$t("已取消"),
            });
          });
      }
    },
    // 任务删除按钮
    taskDel(row) {
      this.detailInfos = row;
      this.status = row.progressStatus.toString();
      this.rowTaskId = row.taskId.toString();
      this.taskExecId = row.taskExecId;
      this.$refs.task_delete_modal.open(this.taskExecId);
    },
    /**弹框取消 */
    handelMission() {
      this.$emit("handelMissionShow");
    },
  },
};
</script>

<style lang="scss" scoped>
@import "~@/assets/styles/robot.scss";
.content {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 16px;
}
.line-one {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .line-box {
    display: flex;
    justify-content: center;
    width: 100%;
    img {
      width: 24px;
      height: 24px;
      vertical-align: middle;
    }
    .confirm-font {
      display: inline-block;
    }
    .warn-font {
      color: #ffad30;
    }
  }
}
.box-checkbox {
  display: flex;
  flex-direction: column;
  justify-content: center;
  .el-radio {
    padding: 10px;
  }
}
.obj-text {
  width: 95%;
  // height: 140px;
  margin-left: 10px;
  padding: 16px;
  box-sizing: border-box;
  text-align: left;
  background-color: rgba(255, 173, 48, 0.06);
  font-size: 11px;
  font-family: SourceHanSansSC-Regular, SourceHanSansSC;
  font-weight: 400;
  color: #ffad30;
  line-height: 17px;
}
</style>
